<!-- eslint-disable @typescript-eslint/no-explicit-any -->
<!-- eslint-disable @typescript-eslint/explicit-function-return-type -->
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { getNavTabList, getArtList } from '@renderer/api/art'
import { useRouter } from 'vue-router'

const router = useRouter();

let pdata = {
  size: 10,
  page: 1
}

let navTabList: any = ref([])
let navTabListIndex = ref(0)
let artList: any = ref([])
let total = ref(0)

onMounted(async () => {
  let navTabResult = await getNavTabList()
  navTabList.value = navTabResult.data
  await artListData()
})

// tab切换
const changeArt = async (index) => {
  navTabListIndex.value = index
  await artListData()
}

// 获取列表
const artListData = async()=>{
  let navTabItem = navTabList.value[navTabListIndex.value]
  let id = navTabItem.id
  let reqData = {
    ...pdata,
    id
  }
  let artResult = await getArtList(reqData)
  artList.value = artResult.data.list
  total.value = artResult.data.total
}

// 跳转详情
const goDetail = (item) => {
  router.push({
    path: '/detail',
    query:{
      id: item.id
    }
  })
}

// 切换分页
const changeCurrent = async (e) => {
  pdata.page = e
  await artListData()
}

// 新窗口打开详情
const openDetail = (item) => {
  window.electron.ipcRenderer.send('open-window', {
    path: `/detail?id=${item.id}`,
    width: 800,
    height: 640
  })
}

</script>

<template>
  <div>
    <div class="tab-box">
      <div class="tab-list no-scrollbar">
        <div
          v-for="(item, index) in navTabList"
          :key="item.id"
          class="tab-title"
          :class="{ active: navTabListIndex == index }"
          @click="changeArt(index)"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
    <div class="tab-content">
      <el-row :gutter="10">
        <template v-if="artList.length > 0">
          <el-col v-for="item in artList" :key="item.id" :span="12" @click="goDetail(item)">
            <div class="gap-content">
              <div class="left">
                <el-image style="width: 100px; height: 100px" fit="cover" :src="item.url" />
              </div>
              <div class="right">
                <div class="title">{{ item.name }}</div>
                <div class="time">更新时间：{{ item.createtime }}</div>
                <div class="open" @click.stop="openDetail(item)">新窗口打开</div>
              </div>
            </div>
          </el-col>
        </template>

        <template v-else>
          <div class="no-data">
            <el-empty description="没有数据" />
          </div>
        </template>
      </el-row>

      <template v-if="artList.length > 0">
        <div class="pagination-box">
          <div class="pagination">
            <el-pagination
              background
              layout="prev, pager, next"
              :page-size="pdata.size"
              :total="Number(total)"
              @current-change="changeCurrent"
            />
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.tab-box{
  overflow-x: hidden;
  background-color: #f1f1f1;
  position: sticky;
  top: 0;
  z-index: 99;
  .tab-list{
    display: flex;
    .tab-title{
      padding: 10px 20px;
      box-sizing: border-box;
      border-radius: 4px;
      cursor: pointer;
      &.active{
        background-color: #409effb3;
        color: #fff;
      }
    }
  }
}
.tab-content{
  padding-bottom: 80px;
  .gap-content {
    background-color: #f1f1f1;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    position: relative;
    cursor: pointer;
    box-shadow: 0px 0px 20px 20px rgba(64, 158, 255, 0.5) inset;
    margin-top: 10px;
    .left{
      width: 100px;
      height: 100px;
    }
    .right {
      flex: 1;
      position: relative;
      padding-left: 10px;
      overflow: hidden;

      .title {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .time {
        position: absolute;
        bottom: 0;
        color: #999;
        font-size: 14px;
      }

      .open{
        position: absolute;
        right: 0;
        bottom: 0;
        font-size: 10px;
        background-color: #666;
        padding: 5px 10px;
        border-radius: 8px;
        color: #fff;
        z-index: 9;
      }
    }
  }
}
.pagination-box{
  height: 60px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 99;
}
.no-data{
  flex: 1;
}
</style>
